<!--
 * @Author: fanrui 1396542827@qq.com
 * @Date: 2025-03-13 14:48:09
 * @LastEditors: fanrui 1396542827@qq.com
 * @LastEditTime: 2025-03-13 14:51:27
 * @FilePath: \vue2-client\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container">
    <div class="dashboard-content">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-header">
              <i class="el-icon-user"></i>
              <span>用户总数</span>
            </div>
            <div class="card-body">

            </div>
          </el-card>
        </el-col>
        <!-- 其他统计卡片 -->
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardPage',
  data() {
    return {
      // 仪表盘数据
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .dashboard-content {
    .el-card {
      .card-header {
        display: flex;
        align-items: center;

        i {
          @include responsive('font-size', 20);
          @include responsive('margin-right', 10);
          color: var(--primary-color);
        }
      }

      .card-body {
        @include responsive('margin-top', 20);
        @include responsive('font-size', 24);
        font-weight: bold;
        color: var(--text-color);
      }
    }
  }
}
</style>
